<template>
    <div class="layout-padding">
        <splitpanes>
            <pane size="17">
                <div class="layout-padding-auto layout-padding-view">
                    <custom-tree default-expand-all :data="data" :props="defaultProps" @node-click="handleNodeClick" />
                </div>
            </pane>
            <pane size="83">
                <div class="layout-padding-auto layout-padding-view">
                    <!--查询表单-->
                    <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
                        <el-form-item>
                            <el-button type="primary"  icon="plus"  @click="onOpenAddMenu">{{ $t('message.add')
                                }}</el-button>
                        </el-form-item>
                        <el-form-item :label="$t('message.userNo')" prop="userNameId">
                            <el-input v-model="state.queryForm.userNameId" clearable
                                :placeholder="$t('message.userNo')" />
                        </el-form-item>
                        <el-form-item :label="$t('message.userName')" prop="userName">
                            <el-input v-model="state.queryForm.userName" clearable
                                :placeholder="$t('message.userName')" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="search" @click="getDataList">{{
                                $t('basMaterial.query') }}</el-button>
                            <el-button icon="refresh" plain  @click="resetQuery">{{ $t('basMaterial.reset')
                                }}</el-button>
                        </el-form-item>
                    </el-form>
                    <el-table :data="state.dataList" v-loading="state.loading" border :cell-style="tableStyle.cellStyle"
                        stripe style="width: 100%;height:100%" :header-cell-style="tableStyle.headerCellStyle"
                        @sort-change="sortChangeHandle">
                        <el-table-column type="index" label="#" width="50" />
                        <el-table-column prop="userNameId" :label="$t('message.userNo')" />
                        <el-table-column prop="userName" :label="$t('message.userName')" />
                        <el-table-column prop="creationTime" :label="$t('message.creationTime')" />
                        <el-table-column :label="$t('common.action')" show-overflow-tooltip width="250">
                            <template #default="scope">
                                <span style="margin-left: 12px">
                                    <el-button type="danger" icon="delete" @click="handleDelete(scope.row)">
                                    </el-button>
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
                        v-bind="state.pagination" />
                </div>
                <MenuDialog @refresh="getDataList" ref="menuDialogRef" />
            </pane>
        </splitpanes>
    </div>
</template>

<script setup lang="ts">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { GetReceivers, DeleteReceiverById } from '/@/api/platform/digital/message';
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import customTree from '/@/components/CustomTree/index.vue';

// 引入组件
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
interface Tree {
    label: string
    children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
    state.queryForm.Module = data.parentLabel;
    state.queryForm.Type = data.value;
    getDataList()
}


const data: Tree[] = ref([
    {
        label: "wms",
        children: [
            {
                label: t("message.CGSL"), value: 'CGSL', parentLabel: 'wms'
            }
        ]
    },
    {
        label: "qms",
        children: [
            {
                label: t("message.PQC"), value: 'PQC', parentLabel: 'qms'
            },
            {
                label: t("message.CGRK"), value: 'CGRK', parentLabel: 'qms'
            }
        ]
    }
])


const defaultProps = {
    children: 'children',
    label: 'label',
}


// 搜索变量
const queryRef = ref()


const state: BasicTableProps = reactive<BasicTableProps>({
    queryForm: {},
    pageList: GetReceivers
})


//  table hook
const {
    getDataList,
    currentChangeHandle,
    sizeChangeHandle,
    sortChangeHandle,
    downBlobFile,
    tableStyle
} = useTable(state)


// 清空搜索条件
const resetQuery = () => {
    // 清空搜索条件
    queryRef.value?.resetFields()
    getDataList(false)

}
// 删除操作
const handleDelete = async (row: any) => {
    try {
        await useMessageBox().confirm(t('common.delConfirmText'));
    } catch {
        return;
    }

    try {
        await DeleteReceiverById({ id: row.id });
        getDataList();
        useMessage().success(t('common.delSuccessText'));
    } catch (err: any) {
        useMessage().error(err.msg);
    }
};
const menuDialogRef = ref();
// 打开新增菜单弹窗
const onOpenAddMenu = (type?: string, row?: any) => {
    console.log(state.queryForm.Module)
    if (state.queryForm.Module == null || state.queryForm.Module == "" || state.queryForm.Module == "undefined") {
        useMessage().warning(t("message.selectModuleFirst"));
        return;
    }
    menuDialogRef.value.openDialog(state.queryForm.Module,state.queryForm.Type);
};
</script>